<template>
  <div class="payment-container">
    <h2>订单支付</h2>

    <!-- 倒计时显示 -->
    <div class="countdown">
      <el-alert
        v-if="timeLeft > 0"
        title="请在 15 分钟内完成支付，否则订单将被取消"
        type="warning"
      >
        剩余支付时间: {{ formattedTime }}
      </el-alert>
      <el-alert v-else title="支付超时，订单已取消" type="error" />
    </div>

    <el-card class="order-info">
      <h3>订单信息</h3>
      <p><strong>订单号：</strong>{{ orderData.orderNumber }}</p>
      <p>
        <strong>下单时间：</strong
        >{{ new Date(orderData.orderTime).toLocaleString() }}
      </p>
      <p><strong>总金额：</strong>¥{{ orderData.totalPrice.toFixed(2) }}</p>
      <h4>订单明细：</h4>
      <el-table :data="orderData.items" style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column label="小计">
          <template slot-scope="scope">
            ¥{{ (scope.row.price * scope.row.number).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="payment-methods">
      <h3>选择支付方式</h3>
      <el-radio-group v-model="paymentMethod">
        <el-radio label="1">支付宝</el-radio>
        <el-radio label="2">微信支付</el-radio>
        <el-radio label="3">银联支付</el-radio>
      </el-radio-group>
    </div>

    <el-button
      type="primary"
      @click="confirmPayment"
      :disabled="!paymentMethod || timeLeft === 0"
    >
      确认支付
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderData: {},
      paymentMethod: "",
      timeLeft: 900, // 15分钟 = 900秒
      countdownInterval: null,
    };
  },
  created() {
    // 从路由参数中获取订单数据
    this.orderData = JSON.parse(this.$route.params.orderData);

    // 启动倒计时
    this.startCountdown();
  },
  beforeDestroy() {
    // 组件销毁时清除倒计时
    if (this.countdownInterval) {
      clearInterval(this.countdownInterval);
    }
  },
  computed: {
    formattedTime() {
      const minutes = Math.floor(this.timeLeft / 60);
      const seconds = this.timeLeft % 60;
      return `${minutes.toString().padStart(2, "0")}:${seconds
        .toString()
        .padStart(2, "0")}`;
    },
  },
  methods: {
    startCountdown() {
      this.countdownInterval = setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft -= 1;
        } else {
          clearInterval(this.countdownInterval);
          this.handleTimeout();
        }
      }, 1000);
    },
    handleTimeout() {
      this.$message.error("支付超时，订单已取消");
      // 可以触发其他逻辑，例如跳转到订单页面或取消订单
      this.$router.push({ path: "/buy" });
    },
    confirmPayment() {
      if (this.timeLeft > 0) {
        // 这里应该调用后端API进行实际支付处理
        // 为了演示，我们只显示一个成功消息
        this.$http
          .post("/webPage/order/pay", {
            id: this.orderData.id,
            payMethod: this.paymentMethod,
          })
          .then((res) => {
            if (res.data.code === 1) {
              this.$message.success("支付成功！");
              // 支付成功后，可以跳转到订单确认页面或返回首页
              this.$router.push({ path: "/buy" });
            }
          });
      } else {
        this.$message.error("支付超时，无法继续支付");
      }
    },
  },
};
</script>

<style scoped>
.payment-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.order-info {
  margin-bottom: 20px;
}
.payment-methods {
  margin-bottom: 20px;
}
.countdown {
  margin-bottom: 20px;
}
</style>